<template>
    <div class="dalle-style mt-[4px]">
        <editor-title title="风格选择" required />

        <div class="flex gap-3 mt-2">
            <div
                v-for="item in styleList"
                :key="item.value"
                class="picture-style-picker rounded-[12px]"
                :class="{
                    'picture-style-picker__active': item.value === value
                }"
                @click="value = item.value"
            >
                {{ item.label }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'
import editorTitle from '../common/editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 风格类型: [vivid, natural]
    modelValue: {
        type: String,
        default: 'vivid'
    }
})

const { modelValue: value } = useVModels(props, emits)

value.value = 'vivid'
const styleList: Array<Record<string, string>> = [
    {
        value: 'vivid',
        label: '生动'
    },
    {
        value: 'natural',
        label: '自然'
    }
]
</script>

<style lang="scss" scoped>
.picture-style-picker {
    display: inline-block;
    width: 155px;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    background-color: var(--el-bg-color-page);
    border: 1px solid transparent;
    border-radius: 8px;
    &:hover, &__active {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
        border: 1px solid var(--el-color-primary);
    }
}
</style>
